<script lang="ts" setup>

import {Calendar, Delete, Edit, Message, QuestionFilled, Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
const data=reactive({
  input:null,
  fruits:['apple','banana','orange']
// })
//导入asserts下的图片
// import L01 from "./assets/1.jpg"
// import L02 from "./assets/2.jpg"
// import L03 from "./assets/3.jpg"
// const lb=reactive({
//   imgs:[L01,L02,L03]
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
import { ref } from 'vue'

const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary" size="large">Primary</el-button>
    <el-button type="success" circle>Success</el-button>
    <el-button type="info" loading>Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <div style="margin: 30px">
    <el-icon :size="90">
      <Edit/>
    </el-icon>
    <el-icon :size="90">
      <Delete/>
    </el-icon>
    <el-icon :size="90">
      <Message />
    </el-icon>
<!--  结合el-botton-->
    <el-icon><QuestionFilled /></el-icon>
    <el-button type="primary" :icon="Edit" circle></el-button>
    <el-button type="primary" :icon="Delete" circle></el-button>
    <el-button type="primary" :icon="Message" size="large"></el-button>
  </div>
<!--  el-input输入框-->
  <div style="margin: 30px">
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search" disabled/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :suffix-icon="Calendar"/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入密码" type="password"/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入一段描述信息" type="textarea" :row="5"/>
  </div>
  <div style="margin: 30px">
    <select>
      <option>选项1</option>
      <option>选项2</option>
    </select>
    <el-select v-model="data.input" placeholder="请选择">
      <el-option v-for="item in data.fruits" :key="item" :label="item" :value="item"></el-option>
    </el-select>
  </div>
<!--  <div style="margin: 30px">-->
<!--    <el-carousel height="300px" style="width: 500px">-->
<!--      <el-carousel-item v-for="item in lb.imgs" :key="item">-->
<!--        <img :src="item"  style="width: 100%">-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->
<!--  </div>-->
  <div style="margin: 30px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

</style>